<template>
	<div style="display: flex;flex-direction: column;" class="productsAndServices mainProducts">
		<Header :selected="5"></Header>
		<div class="bannerArea">
			<div class="banner" :style="bgImg? 'background:url('+bgImg+') no-repeat;background-size:cover;':''"></div>
		</div>
		<Navigation v-loading="loading" :items="breadcrumbItems" :menus="menus" :checked="2" :bgColor="bgColor">
		</Navigation>
		<div class="content" style="min-height: 600px;">
			<div class="content_bg" style="min-height: 600px;">
				<div>
					<el-row :gutter="0" class="tac">
						<el-col :xs="24" :sm="6" :md="6" :lg="6">
							<div class="productTypeTitle" style="">
								{{$t("productCategory")}}
							</div>
						</el-col>
						<el-col :xs="24" :sm="18" :md="18" :lg="18">
							<div class="mainProductsTitle" style="">
								{{$t("mainProducts")}}
							</div>
						</el-col>
					</el-row>
				</div>
				<el-row :gutter="60" class="tac">
					<el-col :xs="24" :sm="24" :md="6" :lg="6">
						<el-menu :default-active="activeIndex" class="el-menu-vertical-demo">
							<div v-for="(item,index) in arrA">
								<el-menu-item class="menuitem" :index="index.toString()"
									@click="productMainList(item.id,true)">
									<div
										:style="'width: 100%; padding: 0px 5%;height: 100%;'+(index<arrA.length-1?'border-bottom: 1px solid #F2F2F3;':'')">
										<span slot="title">{{item.classifyName}}</span>
									</div>
								</el-menu-item>
							</div>
						</el-menu>
					</el-col>
					<el-col :xs="24" :sm="24" :md="18" :lg="18" class="mainProductsDataArea">
						<div v-if="mainProductsData && mainProductsData.length > 0" class="box-card">
							<el-row :gutter="10" style="margin-bottom: 20px;height:100%;">
								<el-col :xs="24" :sm="24" :md="10" :lg="10">
									<div class="mainProductsSwiper" style="width: 100%;  ">
										<swiper :options="mainSwiperOptions" style="width: 100%; height: 100%;">
											<swiper-slide style="width: 100%; height: 100%;"
												v-for="(item,index) in mainProductsData" :key="index">
												<img :src="mainProductsData[index].fileUrl"
													style="width: 100%; height: 100%;" />
											</swiper-slide>
											<div class="swiper-pagination" slot="pagination"></div>
										</swiper>
									</div>
								</el-col>
								<el-col :xs="24" :sm="24" :md="14" :lg="14">
									<div class="productRightArea" style="display: flex;flex-direction: column;">
										<div class="productName" style="">
											{{productMainName}}
										</div>
										<div class="productContentArea">
											<div v-html="$request.formartContent(mainProductContent)"
												style="line-height: 20px;width: 100%;overflow: hidden;">
											</div>
											<div @click="gotoInfo(mainProductId)" style="height: 40px;">
												<div class="moreDetailBtn">{{$t("more")}} <i
														class="el-icon-d-arrow-right"></i></div>
											</div>
										</div>
									</div>
								</el-col>
							</el-row>
						</div>
						<div v-if="!mainProductsData || mainProductsData.length < 1" class="box-card"
							style="height: 200px; width: 100%;text-align: center;line-height: 200px;">
							产品正在更新中
						</div>
						<div style="clear: both;"></div>
						<div style="background-color: #F6F6F6;  ">
							<el-row>
								<el-col :xs="2" :sm="2" :md="2" :lg="1">&nbsp;
									<div class="swiper-button-prev">
									</div>
								</el-col>
								<el-col :xs="20" :sm="20" :md="20" :lg="22">
									<swiper class="swiper-container-small" :options="swiperOptions">
										<swiper-slide v-for="product in productMainVOList"
											style="height: 100%;padding: 20px 0;">
											<img :src="product.useImage" style="height: 90%; width: 100%;" />
											<div style="text-align: center;">{{product.name}}</div>
										</swiper-slide>
									</swiper>
								</el-col>
								<el-col :xs="2" :sm="2" :md="2" :lg="1">&nbsp;
									<div class="swiper-button-next">
									</div>
								</el-col>

							</el-row>
						</div>
					</el-col>
				</el-row>

				<div style="position: relative;  height: auto;width: 100%;margin-top: 3vh;">

					<img style="width: 100%;" :src="fileUrl" />
				</div>
			</div>
		</div>
		<Footer></Footer>
	</div>
</template>

<script>
	import Header from '../../components/common/header/Header.vue'
	import Navigation from '../../components/common/navigation/Navigation.vue'
	import Footer from '../../components/common/footer/Footer.vue'

	import {
		productsAndServicesMenu
	} from '../../utils/menu.js'
	// 导入您需要的模块
	import Swiper from "swiper";
	export default {
		components: {
			Header,
			Navigation,
			Footer
		},
		data() {
			return {
				swiperOptions: {
					loop: false,
					// 设置轮播的配置选项
					slidesPerView: 3,
					spaceBetween: 10,
					navigation: {
						nextEl: '.swiper-button-next',
						prevEl: '.swiper-button-prev'
					},
				},
				mainSwiperOptions: {
					loop: false,
					// 设置轮播的配置选项
					slidesPerView: 1,
					pagination: {
						el: '.swiper-pagination',
					},

				},
				loading: true,
				pageSize: 2,
				total: 0,
				currentPage: 1,
				activeIndex: '0',
				activeNames: [0],
				arrA: [],
				bgImg: '', //头部banner，默认值已绑定，有背景自动切换
				bgColor: "white", //white/red
				menus: productsAndServicesMenu,
				productMainVOList: [],
				mainProductId: '',
				breadcrumbItems: [{
						label: this.$t('home'),
						to: '/'
					},
					{
						label: this.$t('productsAndServices'),
						to: '/productsAndServices'
					},
					{
						label: this.$t('mainProducts'),
						to: '/mainProducts'
					}
				],
				hoverIndex: -1,
				mainProductsData: [],
				mainProductContent: "",
				productMainName: '',
				productMainContacts: {
					createBy: "",
					createId: "",
					createTime: "",
					createUserDeptId: "",
					email: "",
					id: "",
					landline: "",
					mobile: "",
					name: "",
					status: "",
					updateBy: "",
					updateId: "",
					updateTime: ""
				},
				fileUrl: "",
				productClassifyId: ''
			};
		},
		computed: {},
		created() {},
		mounted() {
			//获取背景图
			this.productBgImage();
			//获取产品分类数据
			this.productClassify().then(i => {
				this.$nextTick(() => {
					// this.$refs.mySwiper.$swiper.update(); // 更新swiper实例，确保pagination显示
				});
			});
		},
		methods: {
			handleSelect(key, keyPath) {
				console.log(key, keyPath);
			},
			/**
			 * 获取背景图
			 */
			productBgImage() {
				let params = {};
				let that = this;
				that.$request.productBgImage(params).then(res => {
					this.bgImg = this.$request.getImgUrl() + res.data.fileUrl
				}).catch((error) => {
					console.log(error);
				});
			},
			/**
			 * 获取主营产品分类
			 */
			productClassify() {
				return new Promise((resolve, reject) => {
					let params = {};
					let that = this;
					that.$request.productClassify(params).then(res => {
						if (res && res.data) {
							that.arrA = res.data.productClassifyList;
							if (that.arrA && that.arrA.length > 0) {
								that.productMainList(res.data.productClassifyList[0].id)
							}
							this.productMainContacts = res.data.productMainContacts
							this.fileUrl = res.data.fileUrl
						}
						this.loading = false;

						resolve();
					}).catch((error) => {
						console.log(error);
					});
				});
			},
			/**
			 * 获取主营产品分类
			 */
			productMainList(productClassifyId, isClick) {
				if (isClick) {
					this.currentPage = 1;
				}
				this.productClassifyId = productClassifyId;
				let params = {
					classifyId: productClassifyId,
					pageNum: this.currentPage, //int 类型
					pageSize: this.pageSize //int 类型

				};
				let that = this;
				that.$request.productMainList(params).then(res => {
					if (res && res.data) {
						that.mainProductsData = res.data.productMainFileList;
						that.productMainVOList = res.data.productMainVOList;
						that.mainProductContent = res.data.content;
						that.mainProductId = res.data.id;
						that.productMainName = res.data.productMainName;
						//that.total = res.data.total;
					} else {
						that.mainProductId = '';
						that.mainProductContent = "";
						that.productMainName = '';
						that.mainProductsData = [];
						that.productMainVOList = [];
					}

				}).catch((error) => {
					console.log(error);
				});
			},
			gotoInfo(id) {
				this.$router.push({
					name: this.$t('mainProductsInfo'),
					query: {
						id: id
					}
				});
			},
			handleCurrentChange(currentPage) {
				this.currentPage = currentPage;
				this.productMainList(this.productClassifyId);
			},
		}
	}
</script>

<style scoped>
	@import url("../../components/common/css/productsAndServices/productsAndServices.css");



	.mainProducts .swiper-button-prev {
		left: 0px;
		width: 30px;
		/* 设置按钮宽度 */
		height: 30px;
		/* 设置按钮高度 */

		color: #fff;
		/* 设置按钮文字颜色 */
	}

	.mainProducts .swiper-button-next {
		right: 0px;
		width: 30px;
		/* 设置按钮宽度 */
		height: 30px;
		/* 设置按钮高度 */

		color: #fff;
		/* 设置按钮文字颜色 */
	}

	.box-card-registration {
		margin-top: 3vh;
		margin-bottom: 3vh;
		text-align: center;
		height: 50px;
		line-height: 50px;
		background: #F3F3F3;
	}

	.mainProducts .el-menu {
		border-right: none !important;
		text-align: center;
	}

	/* 产品分类标题 */
	.productTypeTitle {
		border-bottom: 1px solid #dedede;
		height: 40px;
		line-height: 40px;
		width: 100%;
		margin-bottom: 20px;
		font-size: 1.3rem;
	}

	/* 主营产品标题 */
	.mainProductsTitle {
		border-bottom: 1px solid #dedede;
		height: 40px;
		line-height: 40px;
		width: 100%;
		margin-bottom: 20px;
		margin-left: 10px;
	}

	/* 产品名 */
	.productName {
		border: 1px solid #0484D7;
		height: 40px;
		line-height: 40px;
		margin-bottom: 10px;
		text-align: center;
		font-size: 22px;
		background-color: #0484D7;
		color: #FFF;
	}

	.productContentArea {
		border: 1px solid #5eb2e9;
		height: 220px;
		line-height: 25px;
		padding: 5px 15px;
		font-size: 14px;
		color: #9b9b9b;
		position: relative;
	}

	.moreDetailBtn {
		position: absolute;
		right: 16px;
		bottom: 10px;
		height: 30px;
		line-height: 30px;
		width: 120px;
		background-color: #0484D7;
		color: #FFF;
		border-radius: 6px;
		text-align: center;
		font-size: 0.9rem;
		cursor: pointer;
	}

	.moreDetailBtn:hover {
		background-color: #EB7F20;
		font-size: 0.8rem;
	}

	.el-menu-vertical-demo {

		box-shadow: 0px 2px 7px 0px rgba(122, 122, 122, 0.25);
		text-align: center;

	}

	.el-menu-vertical-demo .is-active {
		border-left: 3px solid #0484D7;
	}

	.mainProducts .mainProductsDataArea {
		min-height: calc(262px + 40px);
	}

	.box-card .el-collapse {
		border: 0px !important;

	}

	.el-collapse-item {
		padding: 20px !important;
	}

	.box-card .el-collapse-item {
		margin: 2vh !important;
	}

	.box-card .is-active {
		box-shadow: 0px 2px 7px 0px rgba(122, 122, 122, 0.25);
	}

	.mainProducts .swiper-container {
		margin-left: auto;
		margin-right: auto;
		position: relative;
		overflow: hidden;
		list-style: none;
		padding: 0px;
		z-index: 1;
		height: 215px;
		position: relative;
	}

	.mainProducts .swiper-pagination-bullet-active {
		background-color: #fff !important;
		opacity: 1;
	}

	.mainProducts .swiper-pagination-bullet {
		background-color: #fff !important;
		opacity: 0.2;
	}

	.mainProducts .contactTextArea {
		width: 20vw;
		height: 30vh;
		background: #FFFFFF;
		border: 1px solid #D8D8D8;
		position: absolute;
		right: 60px;
		bottom: 60px;
		padding: 10px;
		border-radius: 6px;
		padding-top: 3vh;
	}

	.mainProducts .contactText {
		height: 5vh;
		line-height: 5vh;
		align-items: center;
		display: flex;
		color: #666666;
		font-weight: 530;
		font-size: 1.3em;
	}

	.mainProducts .setJustify {
		text-align: justify;
		text-align-last: justify;
		/*兼容ie*/
		text-justify: distribute-all-lines;
		width: 60px;
		display: inline-block;
	}

	.mainProductsSwiper,
	.mainProductsSwiperImg {
		height: 270px;
		width: 100%;
		object-fit: cover;
		position: relative;
	}

	.mainProducts .paginationArea {
		margin: 20px 0px;
	}

	.mainProducts .el-pagination {
		margin: 0 auto;
	}

	::v-deep .el-pagination span:not([class*=suffix]) {
		display: inline-block;
		font-size: 13px;
		min-width: 50px;
		height: 28px;
		line-height: 28px;
		vertical-align: top;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
	}

	.content_bg {
		margin: 0px auto;
		padding: 50px;

	}

	@media (min-width: 2560px) {
		.content_bg {
			width: calc(2560px * 0.8);
		}

		.mainProductsSwiper {
			height: calc(1px*(2560/1920 * 270));
		}

		.swiper-container-small {
			height: calc(1px*(2560/1920 * 215)) !important;
		}

		.productRightArea {
			height: calc(1px*(2560/1920 * 270));
		}

		.productName {
			height: calc(1px*(2560/1920 * 40));
			line-height: calc(1px*(2560/1920 * 40));
		}

		.productContentArea {
			height: calc(1px*(2560/1920 * 220));
			line-height: calc(1px*(2560/1920 * 25));
		}

		.el-menu-item,
		.el-submenu__title {
			font-size: 20px !important;
		}
	}

	@media (max-width: 2560px) {
		.content_bg {
			width: calc(2560px * 0.8);
		}

		.productRightArea {
			height: calc(1px*(2560/1920 * 270));
		}

		.mainProductsSwiper {
			height: calc(1px*(2560/1920 * 270));
		}

		.productName {
			height: calc(1px*(2560/1920 * 40));
			line-height: calc(1px*(2560/1920 * 40));
		}

		.swiper-container-small {
			height: calc(1px*(2560/1920 * 215)) !important;
		}

		.productContentArea {
			height: calc(1px*(2560/1920 * 220));
			line-height: calc(1px*(2560/1920 * 25));
		}

		.el-menu-item,
		.el-submenu__title {
			font-size: 20px !important;
		}
	}

	@media (max-width: 2320px) {
		.content_bg {
			width: calc(2320px * 0.8);
		}

		.productRightArea {
			height: calc(1px*(2320/1920 * 270));
		}

		.mainProductsSwiper {
			height: calc(1px*(2320/1920 * 270));
		}

		.productName {
			height: calc(1px*(2320/1920 * 40));
			line-height: calc(1px*(2320/1920 * 40));
		}

		.swiper-container-small {
			height: calc(1px*(2320/1920 * 215)) !important;
		}

		.productContentArea {
			height: calc(1px*(2320/1920 * 220));
			line-height: calc(1px*(2320/1920 * 25));
		}

		.el-menu-item,
		.el-submenu__title {
			font-size: 20px !important;
		}
	}

	@media (max-width: 2120px) {
		.content_bg {
			width: calc(2120px * 0.8);
		}

		.productRightArea {
			height: calc(1px*(2120/1920 * 270));
		}

		.productName {
			height: calc(1px*(2120/1920 * 40));
			line-height: calc(1px*(2120/1920 * 40));
		}

		.productContentArea {
			height: calc(1px*(2120/1920 * 220));
			line-height: calc(1px*(2120/1920 * 25));

		}

		.mainProductsSwiper {
			height: calc(1px*(2120/1920 * 270));
		}

		.swiper-container-small {
			height: calc(1px*(2120/1920 * 215)) !important;
		}

		.el-menu-item,
		.el-submenu__title {
			font-size: 20px !important;
		}
	}

	@media (max-width: 1920px) {
		.content_bg {
			width: calc(1920px * 0.8);
		}

		.companyCultureImgArea {
			width: 60%;
		}

		.companyCultureContent {}


		.productContentArea {
			height: 220px;
			line-height: 25px;
		}

		.productName {
			height: 40px;
			line-height: 40px;
		}

		.productRightArea {
			height: 270px;
		}

		.mainProductsSwiper {
			height: 270px;
		}

		.swiper-container-small {
			height: 215px !important;
		}

		.el-menu-item,
		.el-submenu__title {
			font-size: 20px !important;
		}
	}

	@media (max-width: 1720px) {


		.content_bg {
			width: calc(1720px * 0.8);
		}

		.productName {
			height: calc(1px*(1720/1920 * 40));
			line-height: calc(1px*(1720/1920 * 40));
		}

		.productRightArea {
			height: calc(1px*(1720/1920 * 270));
		}

		.productContentArea {
			height: calc(1px*(1720/1920 * 220));
			line-height: calc(1px*(1720/1920 * 25));

		}

		.mainProductsSwiper {
			height: calc(1px*(1720/1920 * 270));
		}

		.swiper-container-small {
			height: calc(1px*(1720/1920 * 215)) !important;
		}

		.el-menu-item,
		.el-submenu__title {
			font-size: 18px !important;
		}
	}

	@media (max-width: 1520px) {
		.content_bg {
			width: calc(1520px * 0.8);
		}

		.productName {
			height: calc(1px*(1520/1920 * 40));
			line-height: calc(1px*(1520/1920 * 40));
		}

		.productContentArea {
			height: calc(1px*(1520/1920 * 220));
			line-height: calc(1px*(1520/1920 * 25));

		}

		.productRightArea {
			height: calc(1px*(1520/1920 * 270));
		}

		.mainProductsSwiper {
			height: calc(1px*(1520/1920 * 270));
		}

		.swiper-container-small {
			height: calc(1px*(1520/1920 * 215)) !important;
		}

		.el-menu-item,
		.el-submenu__title {
			font-size: 17px !important;
		}
	}

	@media (max-width: 1366px) {
		.content_bg {
			width: calc(1366px * 0.8);
		}

		.productName {
			height: calc(1px*(1366/1920 * 40));
			line-height: calc(1px*(1366/1920 * 40));
			font-size: 18px;
		}

		.productRightArea {
			height: calc(1px*(1366/1920 * 270));
		}

		.productContentArea {
			height: calc(1px*(1366/1920 * 220));
			line-height: calc(1px*(1366/1920 * 25));

		}

		.mainProductsSwiper {
			height: calc(1px*(1366/1920 * 270));
		}

		.swiper-container-small {
			height: calc(1px*(1366/1920 * 215)) !important;
		}

		.moreDetailBtn {
			font-size: 0.8em;
		}

		.el-menu-item,
		.el-submenu__title {
			font-size: 16px !important;
		}
	}

	@media (max-width: 1120px) {
		.content_bg {
			width: 100%
		}

		.productName {
			height: calc(1px*(1120/1920 * 40));
			line-height: calc(1px*(1120/1920 * 40));
			font-size: 14px;
		}

		.productRightArea {
			height: calc(1px*(1120/1920 * 270));
		}

		.productContentArea {
			height: calc(1px*(1120/1920 * 220));
			line-height: calc(1px*(1120/1920 * 25));

		}

		.mainProductsSwiper {
			height: calc(1px*(1120/1920 * 270));
		}

		.swiper-container-small {
			height: calc(1px*(1120/1920 * 215)) !important;
		}

		.moreDetailBtn {
			font-size: 0.8em;
		}

		.el-menu-item,
		.el-submenu__title {
			font-size: 16px !important;
		}
	}

	@media (max-width: 1024px) {}

	@media (max-width: 900px) {
		.productContentArea {
			height: calc(1px*(1120/1920 * 220 + 60));


		}

		.productContentArea div:first {
			height: 100px;

			display: -webkit-box;
			-webkit-line-clamp: 5;
			-webkit-box-orient: vertical;
			overflow: hidden;
			text-overflow: ellipsis
		}
	}
</style>